import { useMultiChainWallet } from '@/contexts/MultiChainWalletContext';
import { useState } from 'react';
import { MultiChainWalletConnect } from './MultiChainWalletConnect';

interface ChainInfo {
  icon: string;
  name: string;
  color: string;
}

const CHAIN_INFO: Record<string, ChainInfo> = {
  solana: { icon: '◎', name: 'SOL', color: 'text-purple-500' },
  bsc: { icon: '🔶', name: 'BSC', color: 'text-yellow-500' },
  xlayer: { icon: '🔷', name: 'XLayer', color: 'text-blue-500' },
};

export function MultiChainWalletStatus() {
  const [showConnectModal, setShowConnectModal] = useState(false);
  const { connected, address, chain, balance, disconnectWallet } = useMultiChainWallet();

  const formatAddress = (addr: string): string => {
    return `${addr.slice(0, 4)}...${addr.slice(-4)}`;
  };

  const handleDisconnect = async () => {
    try {
      await disconnectWallet();
      setShowConnectModal(false);
    } catch (error) {
      console.error('断开连接失败:', error);
    }
  };

  if (!connected) {
    return (
      <div className="relative">
        <button
          onClick={() => setShowConnectModal(true)}
          className="bg-purple-600 hover:bg-purple-700 text-white px-4 py-2 rounded-lg text-sm font-medium transition-colors"
        >
          连接钱包
        </button>
        
        {showConnectModal && (
          <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
            <div className="relative max-w-md w-full mx-4">
              <button
                onClick={() => setShowConnectModal(false)}
                className="absolute -top-2 -right-2 w-8 h-8 bg-gray-700 hover:bg-gray-600 rounded-full flex items-center justify-center text-white z-10"
              >
                ✕
              </button>
              <MultiChainWalletConnect />
            </div>
          </div>
        )}
      </div>
    );
  }

  const chainInfo = chain ? CHAIN_INFO[chain] : null;

  return (
    <div className="relative">
      <button
        onClick={() => setShowConnectModal(true)}
        className="flex items-center gap-2 bg-gray-800 hover:bg-gray-700 border border-gray-600 text-white px-3 py-2 rounded-lg text-sm transition-colors"
      >
        {chainInfo && (
          <>
            <span className={`${chainInfo.color}`}>{chainInfo.icon}</span>
            <span className="hidden sm:inline">{chainInfo.name}</span>
          </>
        )}
        <span className="font-mono">{address ? formatAddress(address) : '未知'}</span>
        {balance && (
          <span className="text-gray-300 text-xs">
            {parseFloat(balance).toFixed(3)}
          </span>
        )}
      </button>
      
      {showConnectModal && (
        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
          <div className="relative max-w-md w-full mx-4">
            <button
              onClick={() => setShowConnectModal(false)}
              className="absolute -top-2 -right-2 w-8 h-8 bg-gray-700 hover:bg-gray-600 rounded-full flex items-center justify-center text-white z-10"
            >
              ✕
            </button>
            <MultiChainWalletConnect />
          </div>
        </div>
      )}
    </div>
  );
}
